<template>
    <div class="zj">
        <el-row :gutter="0"> <!-- 将间隔设置为0 -->
            <el-col :span="24"> <!-- 设置为24来占满整行 -->
                <el-form ref="专家入库审核" :model="formData" :rules="rules" size="medium" label-width="100px">
                    <el-form-item label="专家名称" prop="j_name" class="form-item"
                        :style="{ display: 'inline-block', margin: '0' }">
                        <el-input v-model="formData.j_name" placeholder="请输入专家名称" :maxlength="11" clearable
                             :style="{ width: '380px' }"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="j_sh_state" class="form-item"
                        :style="{ display: 'inline-block', margin: '0' }">
                        <el-select v-model="formData.j_sh_state" placeholder="请选择状态" clearable
                            :style="{ width: '380px' }">
                            <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                                :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary">查询</el-button>
                    <el-button >重置</el-button>
                </el-form>
            </el-col>
        </el-row>
        <el-divider content-position="left" class="custom-divider"></el-divider>
        <el-table :data="tableData" stripe style="width: 95%" class="zjb">
            <el-table-column label="序号" width="100" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }} <!-- 自增序号 -->
                </template>
            </el-table-column>
            <el-table-column prop="j_name" label="专家姓名" width="180">
            </el-table-column>
            <el-table-column prop="j_phone" label="联系方式">
            </el-table-column>
            <el-table-column prop="j_unit" label="工作单位">
            </el-table-column>
            <el-table-column prop="specialized" label="主评专业">
            </el-table-column>
            <el-table-column prop="j_address" label="所在区域">
            </el-table-column>
            <el-table-column prop="j_sh_state" label="审核状态">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.j_sh_state === 4">黑名单</el-tag>
                    <el-tag v-else-if="scope.row.j_sh_state === 2">不合格</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="cz" label="操作">
                <el-button>处理</el-button>
            </el-table-column>
        </el-table>
        <el-pagination class="fy" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
    </div>
</template>
<script scoped>
import { experlist } from '@/api/expert/expertdata.js'
export default {
    components: {},
    props: [],
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                // 搜索条件
                j_name: null,
                j_sh_state: null,
            },
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            tableData: [],
            formData: {
                j_name: '',
                j_sh_state: '',
            },
            rules: {
                j_name: [{
                    pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                    message: '手机号格式错误',
                    trigger: 'blur'
                }],
                j_sh_state: [],
            },
            field101Options: [{
                "label": "待审核",
                "value": 1
            }, {
                "label": "已通过",
                "value": 2
            }, {
                "label": "未通过",
                "value": 3
            }],
        }
    },
    computed: {},
    watch: {},
    created() { },
    mounted() {
        this.fetchData(); // 组件挂载时获取数据
    },
    methods: {
        fetchData() {
            this.queryParams.j_name = this.formData.mobile
            this.queryParams.j_sh_state = this.formData.field101
            experlist(this.queryParams).then(response => {
                this.tableData = response.rows.filter(data => data.j_sh_state == 4 || data.j_sh_state == 2) // 设定获取的数据到表格数据中.// 设定获取的数据到表格数据中
                this.total = response.total; // 假设 total 是总条数
                console.log(response.rows);
                console.log(response.total);
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        submitForm() {
        },
        resetForm() {
            this.$refs['专家入库审核'].resetFields()
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>
<style scoped>
.zj {
    margin-top: 10px;
}

.zjb {
    margin-left: 15px;
    margin-top: 25px;
}

.custom-divider {
    width: 95%;
    /* 设置分隔线的长度 */
    margin-left: 15px;
}

.fy {
    position: absolute;
    left: 620px;
    top: 600px;
}
.el-button{
    margin-left: 20px;
}
</style>
